<template>
  <el-date-picker
    ref="datePicker"
    :value="value"
    type="monthrange"
    align="right"
    unlink-panels
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    value-format="yyyy-MM"
    style="width: 100%"
    @focus="dateType='month_select'"
    @input="onDateChange"
    :picker-options="pickerOptions">
  </el-date-picker>
</template>
<script>
export default {
  props:["value"],
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '本周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            const day = new Date().getDay()-1
            start.setTime(start.getTime() - 3600 * 1000 * 24 * (day == -1 ? day + 1: day));
            let myEvent = new CustomEvent("dateType", {
              detail: { dateType: "week" }
            });
            window.dispatchEvent(myEvent);
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '本月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            const date = new Date().getDate()-1
            start.setTime(start.getTime() - 3600 * 1000 * 24 * date);
            let myEvent = new CustomEvent("dateType", {
              detail: { dateType: "month" }
            });
            window.dispatchEvent(myEvent);
            picker.$emit('pick', [start, end]);

          }
        }, {
          text: '本季度',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            const month  = new Date().getMonth()+1
            if(month>=1&&month<=3){
              start.setDate(1)
              start.setMonth(0)
            } else if(month>=4&&month<=6){
              start.setDate(1)
              start.setMonth(3)
            }else if(month>=7&&month<=9){
              start.setDate(1)
              start.setMonth(6)
            }else if(month>=10&&month<=12){
              start.setDate(1)
              start.setMonth(7)
            }
            let myEvent = new CustomEvent("dateType", {
              detail: { dateType: "quarter" }
            });
            window.dispatchEvent(myEvent);
            picker.$emit('pick', [start, end]);

          },
        }, {
          text: '本年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(0)
            start.setDate(1)
            let myEvent = new CustomEvent("dateType", {
              detail: { dateType: "year" }
            });
            window.dispatchEvent(myEvent);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      dateType:'month_select',
      date:'',
    }
  },
  mounted() {
    window.addEventListener("dateType", this.onDateType);
  },
  beforeDestroy() {
    window.removeEventListener("dateType", this.onDateType);
  },
  methods:{
    onDateType(e){
      this.dateType = e.detail.dateType
      this.$emit("update:type",this.dateType)
    },
    onDateChange(e){
      if(e === null) this.dateType = "month_select"
      this.$emit('input',e)
      this.$emit("update:type",this.dateType)
    },
  }
}
</script>
<style>

</style>
